<template>
    <div>
        <div class="b-c2 chat-herder">
            <div class="z-header width-75 tc c-f">
                <div @click="$router.back(-1)" class="lt">
                    <i class="iconfont icon-zuo m-t-18"></i>
                </div>
                <div class="fs-36">
                    聊天
                </div>
            </div>
        </div>
        <div class="chat-p">
            <!--对面-->
            <div v-for="list in talkRecord">
                <div class="other" v-if="list.from == userName">
                    <div class="p-r">
                        <img src="../../img/cj.png" alt="" class="portrait" />
                        <span class="bubble-lt-tail"></span>
                        <span class="bubble other-bubble">
                            {{list.body.msg}}
                        </span>
                    </div>
                </div>
                <!--自己-->
                <div class="oneself" v-if="list.from != userName">
                    <div class="rt p-r">
                        <span class="bubble oneself-bubble m-r-3">
                            {{list.body.msg}}
                        </span>
                        <span class="bubble-rt-tail m-r"></span>
                        <img src="../../img/cj.png" alt="" class="portrait" />
                    </div>
                </div>
            </div>
        </div>
        <div class="chat">
            <input type="text" name="" id="" v-model="talk">
            <button class="b-c2 c-f" @click="send">确定</button>
        </div>
    </div>
</template>
<script>
import { z } from '../../assets/js/common'
export default {
    data() {
        return {
            userName: this.$route.query.userName,
            talk: "",   //要发送的话
            talkRecord: []  //历史记录
        }
    },
    methods: {
        // 发送消息
        send() {
            var params = new URLSearchParams();
            params.append("ope", 0);
            params.append("to", this.userName);
            params.append("body", this.talk);
            params.append("type", 0);

            this.$http({
                method: "post",
                url: localPath + "/im/sendMsg",
                async: false,
                data: params
            }).then((data) => {
                this.talk = "";
                this.record();
                window.scrollTo(0, document.body.scrollHeight);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 历史信息
        record() {
            var params = new URLSearchParams();
            params.append("to", this.userName);

            this.$http({
                method: "post",
                url: localPath + "/im/querySessionMsg",
                data: params
            }).then((data) => {
                var arr = data.data.msg.msgs;
                var xarr = [];
                for (let i = arr.length - 1; i >= 0; i--) {
                    arr[i].from = arr[i].from.slice(4);
                    xarr.push(arr[i])
                }
                this.talkRecord = xarr;
                console.log(this.talkRecord);
            }).catch((error) => {
                console.log(error);
            })
        },
      

    },
    mounted() {
         
        // window.scrollTo(0, document.body.scrollHeight);

        //定时器     setTimeout
        var timing = window.setInterval(() => {
            this.record();
        }, 2000);

         document.addEventListener(z());

    },
    // methods



}
</script>
<style>
.chat {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.chat-herder {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

.chat>input {
    width: 85%;
}

.chat>button {
    width: 14%;
    height: .56rem;
}

.chat-p {
    padding: 0 .3rem 0.7rem .3rem;
}


.bubble-lt-tail:after,
.bubble-rt-tail:after {
    content: '';
    position: absolute;
    width: .4rem;
    top: 35%;
    height: .43rem;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    /* margin-left: -.6rem; */
    border-bottom-width: 0.2rem;
    border-bottom-color: currentColor;
    color: #dddddd;
}

.bubble-rt-tail:after {
    border-radius: 0 0 112px 0;
}

.bubble-lt-tail:after {
    border-radius: 0 0 0 52px;
}

.bubble {
    padding: .2rem .3rem;
    max-width: 5rem;
    border-radius: 30px;
    background: #dddddd;
}

.m-r {
    margin-right: .3rem;
}

.bubble-rt-tail,
.bubble-lt-tail {
    width: .1rem;
}

.other,
.oneself {
    margin-top: .4rem;
}

.m-r-3 {
    margin-right: -.3rem;
}
</style>
